define :todoTask:view > .view{
	input.toggle type=checkbox {
		:dualbind
			value = 'completed'
			// emit signal when INPUTs state changes via user input
			x-signal = 'dom: taskChanged'
			;
	}
	label > '~[bind:title]';
	button.destroy x-signal = 'click: taskRemoved';
}
define :todoTask:edit >
	todo:input.edit
			// do not clear input after edit
			preserve
			// emit signal on custom event `cancel`
			x-signal = 'cancel: inputCanceled' {

				:dualbind
					value = 'title'
					// change model on custom event `enter` defined in the control
					change-event = 'enter'
					// emit `taskChange` signal each time model is changed
					// via user input
					x-signal = 'dom: taskChanged'
					;
			}

+if($c._isVisible(completed, action)) >
	li
		.~[bind:completed ? 'completed']
		.~[bind:state]
		// emit `edit` on `dblclick` event
		x-signal = 'dblclick: edit'
		{
			:todoTask:view;
			:todoTask:edit;
		}